
import { Sticky } from 'react-vant';
import './cessors.css'
import React, { useMemo, useState } from 'react';
import { Button, ColorPicker } from 'antd';
import type { ColorPickerProps, GetProp } from 'antd';
const Colortts: React.FC = () => {
    type Color = Extract<GetProp<ColorPickerProps, 'value'>, string | { cleared: any }>;
    const [color, setColor] = useState<Color>('#ccc');
    
  const bgColor = useMemo<string>(
    () => (typeof color === 'string' ? color : color!.toHexString()),
    [color],
  );

  const btnStyle: React.CSSProperties = {
    backgroundColor: bgColor,
  };
  const [showDiv,setShowDiv]=useState(true)
   const handleRemoveDiv = () => {
    setShowDiv(false);
  };
  const handleRemoveDiv1 = () => {
    setShowDiv(true);
  };

  const [isOpen, setIsOpen] = useState(false);
  const ad=()=>{
    console.log('213211232132')
  }
  const fiets=()=>{
    window.location.href='/home/chat'
  }
  const were=()=>{
    window.location.href='/home/ai'
  }
  const [colors, setColors] = useState<string>('');
    const colorss = ['#FF5733', '#4030e8', '#3080e8', '#31c9e8','#2de8bd','#31e749','#a4e82f','#e8e22f','#e7b72f','#e88c30','#c67d54','#269ea1','#143192','#ffa4a4'];

   const handleColorClick = (selectedColor: string) => {
    setColors(selectedColor);
  };
  return (
    <div className='boxthrees'>
        <Sticky>
            <div className="right-object">
            <ul>
                <li>
                    <img src="../src/assets/images/qiye.png" alt="" />
                    <p>企业</p>
                    <p>VIP</p>
                </li>
                <li>
                    <img src="../src/assets/images/hongbao.png" alt="" />
                    <p>全场</p>
                    <p>狂欢</p>
                </li>
                <li>
                    <img src="../src/assets/images/qiye2.png" alt="" />
                    <p>企业</p>
                    <p>站</p>
                </li>
                <li>
                    <img src="../src/assets/images/diannao.png" alt="" />
                    <p>在线</p>
                    <p>设计</p>
                </li>
                <li>
                    <img src="../src/assets/images/zhuanqian.png" alt="" />
                    <p>赚钱</p>
                </li>
                <li>
                    <img src="../src/assets/images/liwu.png" alt="" />
                </li>
                <li className="menu-item"
                    onMouseEnter={() => setIsOpen(true)}
                    onMouseLeave={() => setIsOpen(false)}>
                    <img src="../src/assets/images/kefu.png" alt="" />
                    {isOpen && (
                        <ul className="submenu">
                        <li onClick={ad} className='cdes'>
                            <img src="../src/assets/images/service-fill.png" alt="" />
                            <p>企业客服</p>
                            <p>工作时间: 9:30-18:30</p>
                            <p>
                                <button>售前资讯</button>
                                <button>售后服务</button>
                            </p>
                        </li>
                        <li className='escd'>
                            <img src="../src/assets/images/filcer.png" alt="" />
                            <p>个人客服</p>
                            <p>工作时间: 9:30-18:30</p>
                            <p>热线电话： 021-31770313</p>
                            <p>
                                <button onClick={fiets}>在线资讯</button>
                                
                            </p>
                        </li>
                        <li className='escd'>
                            <img src="../src/assets/images/cj.png" alt="" />
                            <p onClick={were}>常见问题》》</p>
                        </li>
                        </ul>
                    )}
                </li>
                <li>
                    <img src="../src/assets/images/wendang.png" alt="" />
                </li>
                <li>
                    <img src="../src/assets/images/kongjian.png" alt="" />
                </li>
            </ul>
        </div>
        </Sticky>
      <div className='char'>
        <Sticky>
            <div className='npc' style={{width:'100%',height:'120px',background:'#fff'}}>
        <div className="stick-top">
        <div onClick={handleRemoveDiv}>X</div>
        <div onClick={handleRemoveDiv1}></div>
        {/* <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div> */}
        {/* <div style={{ display: 'flex', marginBottom: '20px' }}> */}
        {colorss.map((colorValue) => (
          <div
            key={colorValue}
            onClick={() => handleColorClick(colorValue)}
            style={{
              width: '30px',
              height: '30px',
              backgroundColor: colorValue,
              cursor: 'pointer',
              margin: '15px 5px 0 10px',
            }}
          />
        ))}
      {/* </div> */}
        <b>
            <ColorPicker value={color} onChange={setColor}>
                <Button type="primary" style={btnStyle}>
                    <p>...</p>
                </Button>
            </ColorPicker>
        </b>
        <span>点击左侧色块，选取不同颜色试试吧~</span>
      </div>
      {showDiv && (
        <div className="stick-bottom">
            <div>#892fe8</div>
            <div>100%</div>
      </div>
      )}
      
      </div>

      </Sticky>
      <div className="assd">
        <span>当前位置</span>
        <input type="text" placeholder='在当前条件下搜索'/>
      </div>
      <div className="dssc">
        <ul>
            <li>所有:</li>
            <li>全部</li>
            <li>广告设计</li>
            <li>UI设计</li>
            <li>电商淘宝</li>
            <li>插画</li>
            <li>装饰.装修</li>
            <li>摄影图</li>
            <li>新媒体图</li>
            <li>3D素材</li>
        </ul>
      </div>
      </div>
      <div className="chartsfoter">
        {/* <div className="chartfilter">
            <div className="file">
                <div className="file-an">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
            <div className="file">
                <div className="file-an">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
            <div className="file">
                <div className="file-an">
                   <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
            <div className="file">
                <div className="file-an">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
            <div className="file">
                <div className="file-an">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
            <div className="file">
                <div className="file-an">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                   <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
            <div className="file">
                <div className="file-an">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-sn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-dn">
                    <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
                <div className="file-fn">
                   <a href="https://ibaotu.com/sucai/19497948.html?clickFrom=colorsearch">
                        <img src="../src/assets/images/zise.png" alt="" />
                    </a>
                </div>
            </div>
        </div> */}
        <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>Item 1</li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      <ul style={{ listStyleType: 'none', padding: 0,display:'flex',marginTop:'50px'}}>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
        <li style={{ backgroundColor: colors, padding: '10px',width:'250px',height:'350px',textAlign:'center',background:"#892fe8",marginLeft:'110px' }}>
            <img src="../src/assets/images/pika.png" style={{width:'200px',marginTop:'100px'}} alt="" />
        </li>
      </ul>
      </div>
      <div className="footere">
        <div className="footer-tope">
            <span>今日新图</span>
            <span>|</span>
            <span>专题图片</span>
            <span>|</span>
            <span>图片素材</span>
            <span>|</span>
            <span>售后服务</span>
            <span>|</span>
            <span>关于我们</span>
            <span>|</span>
            <span>联系我们</span>
            <span>|</span>
            <span>加入我们</span>
            <span>|</span>
            <span>帮助中心</span>
            <span>|</span>
            <span>在线客服</span>
            <span>|</span>
            <span><img src="../src/assets/images/xinxi.png" alt="" /></span>
            <span>|</span>
            <span><img src="../src/assets/images/zhongyang.png" alt="" /></span>
        </div>
        <div className="footer-centere">
            <p>Copyright © 2016-2024 包图网ibaotu.com 版权所有&ensp;&emsp; 沪ICP备16053114号-2 ICP证沪B2-20180032 沪公京安备31011502400137号 &emsp; 上海工商</p>
            <p>广播电视节目制作经营许可证(沪)字第03172号 &emsp; 网络文化经营许可证 沪文网[2019]2346-159号 &emsp; 出版物经营许可证新出发沪批字第Y8311号&emsp;《包图网络服务使用协议》&emsp;《包图隐私政策》</p>
            <p>为了防范电信网络诈骗，如接到962110来电，请立即接听 违法和不良信息举报电话：021-31770313 邮箱: kf@ibaotu.com</p>
        </div>
      </div>
    </div>
  )
}

export default Colortts
